<template>
  <div class="Recommendedsonglist">
    <span style="font-size:20px;cursor: pointer;font-weight:bold;" @click="getJumpsonglist">推荐歌单<i class="el-icon-arrow-right" style="font-size:18px;"></i></span>
    <div class="Dailyrecommendation">

      <div class="Songlistlist">
        <div @click="getDailyrecommen">
          <div style="width:200px;height:200px;overflow: hidden;">
            <img src="@/assets/pexels-stijn-dijkstra-13008665.jpg" alt="#" style="width:200px;filter: blur(20px);height:200px;border-radius: 5px;">
          </div>
          <p style="font-size:15px;margin-top:5px;">每日歌曲推荐</p>
        </div>
        <div class="Songlist" v-for="(Dailysong,index) in DailyRecommendedsonglist" :key="Dailysong.id" v-show="index<9">
          <img :src="Dailysong.picUrl" alt="#">
          <div v-for="(item,index1) in Playquantitylist" :key="index1" v-show="index==index1">
            <span style="position: relative;left: 140px;z-index: 99;top: -203px;font-size: 13px;color: #fff;"><i class="iconfont icon-24gl-play" style="font-size: 14px;"></i>{{item}}万</span>
          </div>
          <p style="margin-left:-0px;margin-top:-10px;font-size:14px;">{{Dailysong.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/components/eventBus'
import { mapState } from 'vuex'
export default {
  name: 'Recommendedsonglist',
  data() {
    return {
      //歌单的播放数量
      Playquantity: [],
      Playquantitylist: []
    }
  },
  computed: {
    ...mapState({
      //获取每日推荐歌单
      DailyRecommendedsonglist: state => state.Home.DailyRecommendedsonglist
    })
  },
  methods: {
    //点击推荐歌单跳转到歌单组件上
    getJumpsonglist() {
      this.$router.push('/home/Playlist')
      Bus.$emit('Jumpsonglist', '3')
    },
    getDailyrecommen() {
      this.$router.push({ path: '/home/Dailyrecommendation' })
    }
  },
  mounted() {
    this.$store.dispatch('getDailyrecommendedsongList')
    //计算从接口获取的数据
  },
  watch: {
    DailyRecommendedsonglist: {
      handler(v, o) {
        let a = []
        a = [].concat(
          ...v.map(val => {
            return val.playcount
          })
        )
        this.Playquantity = a
        for (let i = 0; i < 9; i++) {
          if (this.Playquantity[i].toString().length < 7) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2))
          } else if (this.Playquantity[i].toString().length < 8) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 3))
          } else if (this.Playquantity[i].toString().length < 9) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 4))
          } else if (this.Playquantity[i].toString().length < 10) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 1))
          } else if (this.Playquantity[i].toString().length < 11) {
            this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2))
          } else {
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Recommendedsonglist {
  .Dailyrecommendation {
    margin-top: 15px;
    display: flex;
  }
  .Songlistlist {
    display: flex;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    .Songlist {
      margin-bottom: 20px;
      margin-right: 20px;
      img {
        width: 200px;
        height: 200px;
        border-radius: 5px;
        cursor: pointer;
      }
      p {
        cursor: pointer;
        margin-left: 20px;
        width: 200px;
        word-wrap: break-word;
      }
    }
  }
}
</style>